Ext.onReady(function()
{
	 
	
    var manufacturerStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'ManufacturerAction_jsonList.action',
        root: 'manufacturerList',
        fields: ['name']
		});
    
    var carStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'CarAction_jsonList.action',
        root: 'carList',
        fields: ['modelName']
		});
    
    var manufacturerComboBox = new Ext.form.ComboBox({
		fieldLabel: 'Manufacturer',
		hiddenName: 'manufacturerName',
		store: manufacturerStore,
        displayField:'name',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        listeners: {'select': manufacturerSelected }

	});
    
    var carComboBox = new Ext.form.ComboBox({
		fieldLabel: 'Model',
		hiddenName: 'carModelName',
		store: carStore,
        displayField:'modelName',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        disabled: true
	});
    
    function manufacturerSelected()
    {
    	Ext.Ajax.request({
			url: 'CarAction_jsonListByManufacturer.action',
			params: { manufacturerName : manufacturerComboBox.value},
			callback :  carListByManufacturerCallback
		});
    }
    
    function carListByManufacturerCallback(options, success, response)
    {	
    	if (success)
    	{
    		var jsonData = Ext.decode(response.responseText);
    		carComboBox.clearValue();
    		carStore.loadData(jsonData);
    		carComboBox.enable();
    	}
    	else
    	{
    		Ext.Msg.show({			
    			title : 'Error',
    		   	msg: 'Data could not be saved to server',				   
    		   	icon: Ext.MessageBox.ERROR,
    		   	buttons: Ext.Msg.OK
    		});	
    	}
    }
	
	var pps = [
               ['400 - 449'],
               ['450 - 499'],
               ['500 - 549'],
               ['550 - 599'],
               ['600 - 649'],
               ['650 - 699'],
               ['700 - 749'],
               ['750 - 799'],
               ['800 - 849'],
               ['849 - 899']     
           ];
       

    
    var ppStore = new Ext.data.ArrayStore({
        fields: ['pp'],
        data : pps
    });
    
    var driveTrainStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'DriveTrainAction_jsonList.action',
        root: 'driveTrainList',
        fields: ['name']
	});
    
    var ppComboBox = new Ext.form.ComboBox({
		fieldLabel: 'PP',
		hiddenName: 'ppRange',
		store: ppStore,
        displayField:'pp',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true
	});
    
    var driveTrainComboBox = new Ext.form.ComboBox({
		fieldLabel: 'Drive',
		hiddenName: 'driveTrainName',
		store: driveTrainStore,
        displayField:'name',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true
	});
           
	var tuneFilterFormPanel = new Ext.FormPanel({
        labelWidth: 80, // label settings here cascade unless overridden
        frame: true,
        title: 'Tune Filter',
    	renderTo: 'tune-filter',
    	bodyStyle:'padding:10px 10px 0',
        width: 320,
        defaults: {width: 200},
        defaultType: 'textfield',
    	collapsible: true,
   		
        items: [
                	manufacturerComboBox,
                	carComboBox,
                	ppComboBox,
                	driveTrainComboBox
          		],

	    buttons: [{
	        text: 'Go!',
	        handler: applyTuneFilter
	    }]

    });
	
	function applyTuneFilter()
	{
    	Ext.Ajax.request({
			url: 'TuneAction_jsonListByTuneFilter.action',
			params: 
			{ 
    			manufacturerName : manufacturerComboBox.value,
    			carModelName : carComboBox.value,
    			ppRange : ppComboBox.value,
    			driveTrainName : driveTrainComboBox.value
    		},
			callback :  tuneListByFilterCallback
		});
	}
	
    function tuneListByFilterCallback(options, success, response)
    {	
    	if (success)
    	{
    		var jsonData = Ext.decode(response.responseText);
    		Ext.getCmp('tunesGrid').getStore().loadData(jsonData);
    	}
    	else
    	{
    		Ext.Msg.show({			
    			title : 'Error',
    		   	msg: 'Data could not be saved to server',				   
    		   	icon: Ext.MessageBox.ERROR,
    		   	buttons: Ext.Msg.OK
    		});	
    	}
    }
   
});
